<template>
	<div class="box">
		<div class="header">
			<div class="header-top" @click="go('/information')">
				<div>
					<span>IBM</span>
					<span>18599999999</span>
				</div>

				<div>
					<!-- <div v-if="comMyPages.portrait != null && comMyPages.portrait != ''">
						<img :src="comMyPages.portrait" alt="" /></div> -->
					<div >     <!-- v-if="comMyPages.portrait == null || comMyPages.portrait == ''" -->
						<img src="../../assets/avatar.png" alt="" />
					</div>
				</div>
			</div>
			<div class="header-btm">
				<div @click="go('/delivery')">
					<span>4</span>
					<span>简历</span>
				</div>
				<div @click="go('/mianshi')">
					<span>5</span>
					<span>约面</span>
				</div>
				<div @click="go('/feedback')">
					<span>2</span>
					<span>反馈</span>
				</div>
				<div @click="go('/store')">
					<span>6</span>
					<span>收藏</span>
				</div>
			</div>
		</div>

		<div class="news" @click="go('/news')">
			<p>我的消息</p>
			<div>欢迎使用华企优才</div>
			<!-- 没有新消息就显示上面的 有新消息就显示第一条未读的消息 -->
		</div>

		<div class="func">
			<p>常用功能</p>
			<div class="quit" @click="out()">退出<img src="../../assets/quit.png" alt="" /></div>
			<div class="funcList">
				<div @click="go('/manage')">
					<img src="../../assets/zhiwei.png" alt="" />
					<span>职位管理</span>
				</div>
				<div @click="go('/integral')">
					<img src="../../assets/jifen.png" alt="" />
					<span>我的积分</span>
				</div>
				<div @click="go('/spread')">
					<img src="../../assets/fenxiang1.png" alt="" />
					<span>我的推广</span>
				</div>
				<div @click="go('/company')">
					<img src="../../assets/gongsi.png" alt="" />
					<span>我的公司</span>
				</div>
			</div>
		</div>
		<div class="footer">
			<div @click="go('/')">
				<img src="../../assets/shouye.png" alt="" />
				首页
			</div>

			<div @click="go('/faxian')">
				<img src="../../assets/faxian.png" alt="" />
				发现
			</div>
			<div @click="go('/tuijian')">
				<img src="../../assets/tuijian.png" alt="" />
				推荐
			</div>
			<div @click="go('/my')" class="footer-color">
				<img src="../../assets/wode1.png" alt="" />
				我的
			</div>
		</div>
	</div>
</template>

<script>
	import {
		MessageBox,
		Toast
	} from "mint-ui";
	export default {
		inject: ["reload"],
		name: "companyMy",
		components: {
			MessageBox,
			Toast
		},
		created() {
			// created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
      // this.getComMyData();
		},
		mounted() {
			// mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
		},
		// data() 为变量赋值等
		data() {
			return {
				status: localStorage.status,
				value: false,
				ycUserEntity:{}
			};
		},
		// methods 编写js函数
		methods: {
			getMyData() {
				console.log(window.localStorage.getItem("userId"));

			},
			getComMyData() {

			},
			go(r) {
				this.$router.push(r);
			},
			out() {
				MessageBox.confirm("确定要退出该账号吗?")
					.then((action) => {
						window.localStorage.status = ''
						window.localStorage.removeItem('userId')
						console.log(localStorage.status);
						console.log(localStorage.getItem("userId"));
						this.$router.push("/")
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	html,
	body,
	.tac,
	.box,
	.tab-left,
	.tab-left .el-menu {
		height: 100%;
	}

	.box {
		width: 100%;
	}

	.header {
		background: #3e63a8;
		width: 100%;
		height: 200px;
		color: #fff;
		position: relative;
	}

	.header-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20px 20px 0 20px;
		align-items: center;
	}

	.header-top div {
		font-size: 20px;
		display: flex;
		flex-flow: column;
	}

	.header-top div span:last-child {
		font-size: 12px;
		margin-top: 10px;
	}

	.header-top img {
		width: 88px;
		height: 88px;
		border-radius: 50%;
	}

	.header-btm {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		display: flex;
		justify-content: space-between;
	}

	.header-btm div {
		display: flex;
		flex-flow: column;
		align-items: center;
		font-size: 12px;
	}

	.header-btm div span {
		margin-bottom: 5px;
	}

	.news {
		width: 90%;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 10px;
		box-shadow: 2px 2px 5px #c7c7c7;
		position: relative;
		left: 5%;
		top: -20px;
		background: #fff;
		font-size: 14px;
		display: flex;
		align-items: center;
		height: 40px;
	}

	.news p {
		border-right: 1px dashed #c7c7c7;
		padding-right: 10px;
		margin-right: 10px;
	}

	.news div {
		font-size: 12px;
		color: #757575;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.func {
		width: 100%;
		position: relative;
		box-shadow: 2px 2px 5px #c7c7c7;
		margin-bottom: 10px;
	}

	.func p {
		font-size: 14px;
		font-weight: 900;
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
	}

	.funcList {
		width: 100%;
		padding: 20px 0;
		display: flex;
	}

	.funcList img {
		width: 24px;
		height: 24px;
		margin-bottom: 10px;
	}

	.funcList div {
		width: 25%;
		display: flex;
		flex-flow: column;
		align-items: center;
		font-size: 14px;
	}

	.quit {
		font-size: 12px;
		display: flex;
		align-items: center;
		position: absolute;
		right: 20px;
		top: 10px;

	}

	.quit img {
		width: 18px;
		height: 18px;
		margin-left: 5px;
	}
</style>
